<template>
  <div class="headerWrapper">
    <header class="header" :class="headerClass">
      <div class="container-x-suit">
        <div class="container-normal">
          <h1>
            <router-link to="/home">
              <img :src="requireImg('logo.png')" class="nav-logo" style="height: 38px"/>
            </router-link>
          </h1>
          <m-nav :navItem="navItem"></m-nav>
        </div>
      </div>
      <div class="container-small">
        <i class="icon-other" @click="sidebarShowFlag = true"></i>
        <router-link to="/home" class="nav-logo"></router-link>
      </div>
    </header>
    <sidebar ref="sidebar" v-model="sidebarShowFlag"></sidebar>
  </div>
</template>

<script>
import Sidebar from '@/components/sidebar/sidebar'
import MNav from './components/nav'
import { requireImgMixin } from '@/common/js/mixin'

export default {
  name: 'MHeader',
  mixins: [requireImgMixin],
  data() {
    return {
      sidebarShowFlag: false,
      navItem: [
        {
          label: '首页',
          path: '/home'
        }, {
          label: '走进虎匠',
          path: '/company',
          children: [
            {
              label: '企业介绍',
              path: '/company/intro'
            }, {
              label: '企业文化',
              path: '/company/cult'
            }
          ]
        }, {
          label: '班组介绍',
          path: '/capintro'
        }, {
          label: '加入我们',
          path: '/joinus'
        }, {
          label: '联系我们',
          path: '/callus'
        }
      ]
    }
  },
  mounted() {
  },
  methods: {
  },
  computed: {
    headerClass() {
      if (this.$route.path === '/home') {
        return 'home'
      }
      return ''
    }
  },
  components: {
    Sidebar,
    MNav
  }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import '~common/stylus/mixin.styl'

.headerWrapper
  position: fixed
  width: 100%
  left: 0
  top: 0
  z-index: 100
  box-shadow: 0px 2px 12px 0 rgba(0,0,0,.1)
  .header
    height: 80px
    background-color: rgba(255, 255, 255, 1)
    color: #FFF
    top: 0
    left: 0
    width: 100%
    line-height: 80px
    z-index: 50
    position: relative
    &.home
      background-color: rgba(255, 255, 255, 0.7)
    .container-normal
      padding: 0 20px
      height: 100%
      // overflow: hidden
      box-sizing: border-box
      h1
        margin: 0
        float: left
        font-size: 32px
        font-weight: 400
        a
          color: #333
          text-decoration: none
          display: block
          .nav-logo
            vertical-align: sub
    .container-small
      display: none
      height: 100%
      box-sizing: border-box
      i:before
        color: #000
      .nav-logo
        position: absolute
        height: 25px
        width: @height * 4
        background: requireImg('logo.png') center center no-repeat
        top: 50%
        left: 50%
        margin-left: -(@width / 2)
        margin-top: -(@height / 2)
        background-size: @width
      i[class*=icon]
        font-size: 30px
        line-height: 40px
        margin: 0 10px
        cursor: pointer

@media (max-width: $media-smail)
  .headerWrapper
    .header
      height: 40px
      line-height: 40px
      .container-x-suit
        display: none
      .container-small
        display: block
</style>
